<template>
  <div class="boxs-BL">
    <div class="btn" @click="remarkShowModal" v-if="remark.length <= 0"><a-icon type="plus" />备注</div>
    <a-popover placement="top" v-else>
      <template slot="content">
        <p>{{ remark }}</p>
      </template>
      <div class="contents">
        <div class="contents-font">{{ remark }}</div>
        <a-icon class="icon" type="edit" @click="remarkShowModal" />
      </div>
    </a-popover>

    <!-- <div class="placeholder" v-if="selectLabelList.length > 0 && remark.length < 4"></div> -->
    <a-popover placement="top" v-for="(item, index) in selectLabelList" :key="index">
      <template slot="content">
        <p>{{ item }}</p>
      </template>
      <div class="contents labels">
        <div class="contents-font">{{ item }}</div>
        <a-icon class="icon" type="close" @click="selectLabelClose(index)" />
      </div>
    </a-popover>
    <div class="btn" @click="labelShowModal"><a-icon type="plus" />标签</div>
    <a-modal v-model="remarkVisible" title="编辑备注" @ok="remarkHandleOk">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="备注内容">
          <a-textarea v-model="remarkValue" placeholder :maxLength="200" :auto-size="{ minRows: 5, maxRows: 8 }" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="labelVisible" title="选择标签">
      <template slot="footer">
        <a-button
          key="back"
          @click="
            labelVisible = false;
            showInput = false;
          "
          >取消</a-button
        >
        <a-button key="submit" type="primary" :disabled="showInput" @click="labelHandleOk">确定</a-button>
      </template>
      <div class="titles">选择员工标签</div>
      <div class="label-model-boxs">
        <div
          v-for="(item, index) in labelList"
          :key="index"
          class="contents label-model-itme"
          :style="item.type ? `background:${primaryColor};color:#fff;` : ''"
          @click="selectLable(item, index)"
        >
          <a-popover placement="top">
            <template slot="content">
              <p>{{ item.tagName }}</p>
            </template>

            <div class="contents-font">{{ item.tagName }}</div>
            <a-icon class="icon" type="close" @click.stop="labelClose(item.tagName, index)" />
          </a-popover>
        </div>
        <div class="addLable" v-if="!showInput">
          <div class="contents label-model-itme add" @click="showInput = true"><a-icon type="plus" />添加标签</div>
        </div>
      </div>
      <div v-if="showInput">
        <a-input v-model="inputValue" placeholder="输入标签" class="addInput" />
        <a-button type="link" @click="onSubmit" :disabled="inputValue.length <= 0">确定</a-button>
        <a-button
          type="link"
          class="closeAddInput"
          @click="
            showInput = false;
            inputValue = '';
          "
          >取消</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
import { empTagAdd, empTagDelete, listByCompanyIdGet, editEmpFieldValue } from "../api";
export default {
  props: {
    remarkData: {
      type: String,
      default: ""
    },
    labelData: {
      type: String,
      default: ""
    }
  },
  watch: {
    remarkData(v) {
      if (v) {
        this.remark = v;
        this.remarkValue = v;
      } else {
        this.remark = "";
        this.remarkValue = "";
      }
    },
    labelData(v) {
      if (v) {
        this.selectLabelList = v.split(",");
      } else {
        this.selectLabelList = [];
      }
    }
  },
  data() {
    return {
      userId: "",
      remarkVisible: false,
      remark: "",
      remarkValue: "",
      labelVisible: false,
      labelList: [],
      selectLabelList: [],
      showInput: false,
      inputValue: "",
      primaryColor: ""
    };
  },
  created() {
    this.getLable();
    this.primaryColor = localStorage.getItem("primary");
  },
  methods: {
    async getLable() {
      try {
        const { data } = await listByCompanyIdGet({ companyId: this.$store.state.hr.companyId });
        data.forEach(ele => {
          ele.type = false;
        });
        this.labelList = data;
        this.filterLabel();
      } catch (err) {
        console.log("debug log --> ", err);
      }
    },
    filterLabel() {
      this.labelList.forEach(e => {
        e.type = false;
        this.selectLabelList.some(ele => {
          if (ele === e.tagName) {
            e.type = true;
            return true;
          }
        });
      });
    },
    remarkShowModal() {
      this.remarkVisible = true;
      this.remark = this.remarkValue;
    },
    remarkHandleOk() {
      this.editRemarkLabel("remark", this.remarkValue);
    },
    labelClose(e, i) {
      this.$confirm({
        title: "删除",
        content: "确定删除该标签?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          this.delEmpTagDelete(e, i);
        }
      });
    },
    async delEmpTagDelete(e, i) {
      try {
        await empTagDelete({
          companyId: this.$store.state.hr.companyId,
          tagName: e
        });
        this.labelList.splice(i, 1);
        // this.getLable();
      } catch (err) {
        console.log("debug log --> ", err);
      }
    },
    labelShowModal() {
      this.labelVisible = true;
      this.filterLabel();
    },
    labelHandleOk() {
      const arr = [];
      this.labelList.forEach(ele => {
        if (ele.type) {
          arr.push(ele.tagName);
        }
      });
      this.editRemarkLabel("tag", arr.join(","));
    },
    async editRemarkLabel(e, v) {
      const data = {};
      e === "remark" ? (data.remark = v) : (data.tag = v);
      try {
        await editEmpFieldValue({
          companyId: this.$store.state.hr.companyId,
          empInfoId: this.$route.query.id,
          moduleCode: e,
          data
        });
        if (e === "remark") {
          this.remarkVisible = false;
          this.remark = this.remarkValue;
        } else {
          this.labelVisible = false;
          this.selectLabelList = [];
          this.selectLabelList = v ? v.split(",") : [];
        }
      } catch (err) {
        console.log("debug log --> ", err);
      }
    },
    selectLable(e, i) {
      e.type = !e.type;
      this.$set(this.labelList, i, e);
    },
    selectLabelClose(i) {
      this.$confirm({
        title: "删除",
        content: "确定删除该标签?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          this.selectLabelList.splice(i, 1);
          this.editRemarkLabel("tag", this.selectLabelList.join(","));
          this.filterLabel();
        }
      });
    },
    async onSubmit() {
      try {
        await empTagAdd({
          companyId: this.$store.state.hr.companyId,
          tagName: this.inputValue
        });
        this.labelList.push({
          tagName: this.inputValue,
          type: false
        });
        // this.getLable();
        this.showInput = false;
        this.inputValue = "";
      } catch (err) {
        console.log("debug log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.boxs-BL {
  width: 156px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 11px;
  i {
    color: #c0c0c0;
  }
  .placeholder {
    width: 60px;
  }
  .btn {
    width: 60px;
    height: 22px;
    line-height: 22px;
    background-color: #f2f2f2;
    border-radius: 2px;
    color: #9c9c9c;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .contents {
    // width: 40px;
    width: 134px;
    height: 22px;
    line-height: 22px;
    background: #f2f2f2;
    border-radius: 2px;
    color: #55565d;
    padding-left: 10px;
    padding-right: 20px;
    position: relative;
    margin-bottom: 10px;
    text-align: left;
    .contents-font {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      position: absolute;
      top: 4px;
      right: 4px;
    }
  }
  .labels {
    width: 60px;
  }
}
.titles {
  height: 20px;
  line-height: 20px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #565656;
}
.label-model-boxs {
  display: flex;
  flex-wrap: wrap;
  .label-model-itme {
    max-width: 134px;
    height: 30px;
    line-height: 30px;
    height: 22px;
    line-height: 22px;
    background: #f2f2f2;
    border-radius: 2px;
    color: #55565d;
    padding-left: 10px;
    padding-right: 24px;
    position: relative;
    margin-bottom: 18px;
    margin-right: 10px;
    cursor: pointer;
    .contents-font {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      position: absolute;
      top: 5px;
      right: 4px;
      color: #c0c0c0;
      font-size: 12px;
    }
  }
  .add {
    padding-right: 10px;
    i {
      color: #c0c0c0;
      // font-size: 12px;
    }
  }
}
.addInput {
  width: 260px;
}
.closeAddInput {
  color: #c0c0c0;
}
</style>
